<!-- 待审核的list组件 -->
<template>
  <view class="item_contain">
    <view class="card" @click="toInfoPage()">
      <view class="top">
        <view
          >承运单号:{{ item.billNo }}
          <Order size="10" @click="copy(item.billNo)" />
        </view>
        <view class="status">待审核</view>
      </view>
      <view class="center">
        <view>
          <view class="content">{{ item.startBranchName }}</view>
          <view class="tit">起运地</view>
        </view>
        <view>
          <image class="car" src="@/assets/images/homePage/shouye_img_qianwang@3x.png" />
        </view>
        <view>
          <view class="content">{{ item.destinationBranchName }}</view>
          <view class="tit">目的地</view>
        </view>
      </view>
      <view class="list">
        <view class="it">
          <view>货物信息：{{ item.goodsInfo[0]?.goodsName || '无' }}，</view>
          <view>{{ item.goodsInfo[0]?.goodsNumber || 0}}件，</view>
          <view>{{ filterGoodsInfo(item.goodsInfo[0]) }}</view>
        </view>
        <view class="it">下单时间：{{ filterTime(item.billingTime) }}</view>
      </view>

      <view class="bottom">
        <view :style="{ visibility: item.clearingForm == '1' && !item.allPaid && item.billNo ? 'visible' : 'hidden' }" class="need_pay">待付款：￥{{ allPay }} </view>
        <view class="btn_box">
          <nut-button class="btn btn2" @click="toReviewPage(item)">审核运单</nut-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { OrderListType } from '@/type/index'
import useOrderStore from '@/store/order'
import Taro from '@tarojs/taro'
import dayjs from 'dayjs'
import { Order } from '@nutui/icons-vue-taro'
import { onMounted, ref } from 'vue'

const props = defineProps<{
  item
}>()

const item = props.item
const orderStore = useOrderStore()

const allPay = ref(0) //待付款

// 计算待付款
item.costList.forEach((item) => {
  allPay.value = allPay.value + (item.actualMoney - item.paidMoney)
})

// 跳转到审核页
function toReviewPage(item: OrderListType) {
  orderStore.orderInfo = item
  Taro.navigateTo({
    url: '/pages2/reviewPage/index'
  })
}

// 跳转去对应的详情页 直接跳 本来查的就是审核数据
function toInfoPage() {
  orderStore.orderInfo = item
  Taro.navigateTo({
    url: '/pages2/waybillPage/reviewInfo'
  })
}

// 复制订单标号
const copy = (msg) => {
  Taro.setClipboardData({
    data: msg,
    success: function (res) {
      Taro.getClipboardData({
        success: function (res) {
          console.log(res.data) // data
          Taro.showToast({
            title: `复制成功`,
            icon: 'success',
            duration: 2000
          })
        }
      })
    }
  })
}

// 过滤时间
function filterTime(val) {
  return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}


// 过滤货物重量体积包装
function filterGoodsInfo(val) {
  console.log(val, 6666)
  if (val) {
    const { weigh, goodsVolume, packing } = val
    return `${weigh || ''}kg，${parseFloat(goodsVolume.toFixed(2)) || ''}m³，${packing || ''}`
  } else {
    return `无`
  }
}
</script>

<style lang="scss">
.item_contain {
  width: 702rpx;
  margin: 8rpx auto;
  padding-top: 0 !important;
}

.card {
  margin: 16rpx auto;
  background: #fff;
  border-radius: 10rpx;
  padding: 24rpx;
  box-sizing: border-box;

  .top {
    width: 654rpx;
    font-size: 22rpx;
    color: #252525;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .status {
      display: inline-block;
      height: 40rpx;
      line-heifht: 40rpx;
      text-align: center;
      background: #ffeddb;
      color: #ff8f1f;
      font-size: 24rpx;
      padding: 4rpx 12rpx;
      border-radius: 10rpx;
    }
  }

  .center {
    width: 580rpx;
    margin: 36rpx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;

    .content {
      font-size: 28rpx;
      color: #252525;
      font-weight: bold;
    }

    .tit {
      font-size: 24rpx;
      color: #999;
    }

    .car {
      width: 224rpx;
      height: 56rpx;
    }
  }

  .list {
    width: 654rpx;
    margin: 36rpx auto;
    background: #f5f5f5;
    color: #666;
    font-size: 24rpx;
    padding: 12rpx;
    box-sizing: border-box;
    border-radius: 10rpx;

    .it {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 10rpx;
    }
  }

  .bottom {
    width: 654rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20rpx;

    .need_pay {
      color: #ff8f1f;
      font-size: 24rpx;
    }

    .btn_box {
      display: flex;
      justify-content: center;
      align-items: center;

      .btn {
        display: inline-block;
        height: 56rpx;
        line-height: 56rpx;
        border-radius: 88rpx;
        padding: 12px 24px;
        text-align: center;
        font-size: 24rpx;
        box-sizing: border-box;
      }

      .btn1 {
        border: 1rpx solid #c4c4c4;
        color: #252525;
        margin-right: 16rpx;
      }

      .btn2 {
        border: 1rpx solid #0966ff;
        color: #0966ff;
      }
    }
  }
}
</style>
